Beginning With Forms

You can do many things with javascript using your forms. Great, you say, but where does one figure out how to access those form elements with javascript? Well, if I were in a good mood, I might tell you! .....Oh, all right, I'll tell you anyway...........

You can access various parts of a form by naming them. In turn, you must give the form a name, because it will be part of what you need to get to what you want. Take a look at the following form code:

<FORM name="coolform">
<INPUT type="text" name="cooltext" value="I am Cool!!!" size="20">
</FORM>

This code creates a little input box for text. The value="I am Cool!!!" attribute gave this box an initial value, which can be changed if the viewer types something else.....OR..... if you were to change it with javascript! Here is what the box looks like:

You can go up there and type something else if you like......just keep it clean, OK? :-)

Now, recall from the code above that we gave this form and the box names. This is how we will get to them with javascript. Now, the input box is part of the form, and the form is part of the document. If you remember the document.location object from a previous section, you know we can access parts of the document and change them. (document.location allowed us to change the url and go to a different page). So, to access the form, we would use:

document.coolform

Remember, the name of our form is "coolform" from the name="coolform" attribute inside the form tag. Now, to access the text box, you would add on the name of the text box:

document.coolform.cooltext

Again, the name of the text box was used. We had named it "cooltext".

Now, we can access the value of the text box, which is what is in the value=" " attribute. So, if we wanted to get to the value of the box....the text "I'm Cool!!!", we would add the word "value" to the end of the list:

document.coolform.cooltext.value

Notice that each time we add something to the list, it is separated from the others by a dot. This is because we are using "objects" to get what we need. The document, the form, and the text box are all objects in the browser. The addition of the "value" at the end lets us access the value of the text box object. The text box object was part of the form object, and the form object......yes, it is part of the document object!

Now that we can get to the value of the text box, we should be able to do something with it, right?.... Getting the idea? Yes, let's try to change the text in the box! One way to do this is to let the viewer click a button and change the text when the button is clicked. For the above form, we can simply add a button at the end, and use the old "onClick" function to perform a javascript. Here is the sample code:

<FORM name="coolform1">
<INPUT type="text" name="cooltext" value="I am Cool!!!" size="20">
&nbsp;&nbsp;
<INPUT type="button" name="change" value="Click to see new text!" onClick="document.coolform1.cooltext.value='You are cool too!!'">
</FORM>

Notice that I gave this form a new name (coolform1). If you have more than one form on the same page, be sure they all have different names. Otherwise when you try to access the form, the browser won't know which form you want to go to, because they have the same name! So....... This gives you the following box and button. If you are feeling rather cool today, click on the button to change the text in the text box....

You can also change the text on a button that is clicked in the same way:

<FORM name="coolform2">
<INPUT type="button" name="coolbutton" value="Click Here and see what I have to say!" onClick="document.coolform2.coolbutton.value='Who told you to Click ME?'">
</FORM>

Be sure to make the initial set of text in the value=" " attribute longer than the text you want to change it to. The button will need the room to write your new text! Try out the button below:

Knowing this will come in handy in the next section, where you will see how to access a select box and learn the next trick: JavaScript Drop Boxes.